<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/xSystem/css/xSystem.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/admin.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/xSystem/vendor/nprogress/nprogress.css">
    <style type="text/css">
        body .demo-class .layui-layer-title{background:#F37B1D; color:#fff; border: none;}
        body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
        body .demo-class .layui-layer-btn a{background:#F37B1D;border: none;font-size: 14px;}
        body .layui-layer-molv .layui-layer-btn a{background:#009f95;border: none;font-size: 14px;}
        body .layui-layer-molv .layui-layer-btn .layui-layer-btn1{color: #fff}
        body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
    </style>
</head>
<body>
<jsp:include page="../layouts/head.jsp"></jsp:include>
<div class="am-cf admin-main">
    <jsp:include page="../layouts/menu.jsp"></jsp:include>

    <!-- content start -->
    <div class="admin-content">
        <div class="admin-content-body">
            <div class="am-cf am-padding am-padding-bottom-0">
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">商品列表</strong> /
                    <small>Product list</small>
                </div>
            </div>

            <hr>

            <div class="am-g" style="height: 37px;">
                <div class="am-u-sm-12 am-u-md-6">
                    <div class="am-btn-toolbar">
                        <div class="am-btn-group am-btn-group-xs">

                            <a  onclick="window.location='${pageContext.request.contextPath}/admin/product/create'" class="am-btn am-btn-success"><span class="am-icon-plus"></span> 新增
                            </a>

                            <a class="am-btn am-btn-default" id="destroy_checked"><span class="am-icon-trash-o "></span> 删除 ${success}</a>
                        </div>
                    </div>
                </div>

            </div>

            <div class="am-g">
                <div class="am-u-sm-12 am-u-md-12">
                    <form class="am-form-inline" role="form" method="get"
                          action="${pageContext.request.contextPath}/admin/product/index">

                        <div class="am-form-group">
                            <input type="text" name="name" class="am-form-field am-input-sm" placeholder="商品名"
                                   value="${params.name}">
                        </div>

                        <div class="am-form-group">
                            <select data-am-selected="{btnStyle: 'secondary', btnSize: 'sm', maxHeight: 360, searchBox: 1}"
                                    name="category_id">
                                <optgroup label="请选择">
                                    <option value="-1">所有分类</option>
                                </optgroup>

                                <optgroup label="手机">
                                    <option value="1"></option>
                                </optgroup>

                            </select>
                        </div>
                        <div class="am-form-group">
                        </div>

                        <div class="am-form-group">
                            <div class="am-btn-group" data-am-button="">
                                <label class="am-btn am-btn-default am-btn-sm am-radius <c:if test="${params.isTop==1}">am-active</c:if>">
                                    <input type="checkbox" name="is_top" value="1"
                                           <c:if test="${params.isTop==1}">checked</c:if> > 置顶
                                </label>
                                <label class="am-btn am-btn-default am-btn-sm am-radius ">
                                    <input type="checkbox" name="is_recommend" value="1"> 推荐
                                </label>
                                <label class="am-btn am-btn-default am-btn-sm am-radius ">
                                    <input type="checkbox" name="is_hot" value="1"> 热映
                                </label>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <select data-am-selected="{btnSize: 'sm'}" name="is_onsale" id="">
                                <option value="-1">上架状态</option>
                                <option value="1">上架</option>
                                <option value="0">下架</option>
                            </select>
                        </div>

                        <div class="am-form-group">
                            <input type="text" name="init_time" value="${params.initTime}" class="am-form-field am-input-sm" placeholder="开始时间" data-am-datepicker="{theme: 'success',format: 'yyyy-mm-dd'}" readonly/>
                            <input type="text" name="end_time" value="${params.endTime}" class="am-form-field am-input-sm" placeholder="结束时间" data-am-datepicker="{theme: 'success'}" readonly/>
                        </div>

                        <button type="submit" class="am-btn am-btn-default am-btn-sm">查询</button>
                    </form>
                </div>

            </div>

            <div class="am-g">
                <div class="am-u-sm-12">
                    <form class="am-form">
                        <table class="am-table am-table-striped am-table-hover table-main">
                            <thead>
                            <tr>
                                <th class="table-check"><input id="checked" type="checkbox"></th>
                                <th class="table-id">ID</th>
                                <th class="table-title">缩略图</th>
                                <th class="table-type">商品名称</th>
                                <th class="table-type">商品分类</th>
                                <th class="table-author am-hide-sm-only">商品价格</th>
                                <th class="table-date am-hide-sm-only">是否上架</th>
                                <th class="table-date am-hide-sm-only">顶置</th>
                                <th class="table-date am-hide-sm-only">新品</th>
                                <th class="table-date am-hide-sm-only">推荐</th>
                                <th class="table-date am-hide-sm-only">热卖</th>
                                <th class="table-date am-hide-sm-only">创建时间</th>
                                <th class="table-date am-hide-sm-only">库存</th>
                                <th class="table-date am-hide-sm-only">排序</th>
                                <th class="table-set">操作</th>
                            </tr>
                            </thead>
                            <tbody>

                            <c:forEach var="product" items="${products.list}">
                                <tr>
                                    <td><input type="checkbox" value="${product.id}"  name="checked_id" class="checked_id" data-id="${product.id}"></td>
                                    <td>${product.id}</td>
                                    <td><img width="100" height="50" class="thumb" src="${product.thumb}"/></td>
                                    <td>${product.name}</td>
                                    <td>${product.category.name}</td>
                                    <td>${product.price}</td>
                                    <td>
                                        <c:choose>
                                            <c:when test="${product.isOnsale==1}">
                                                <span class="am-icon-check is_something" data-attr="isOnsale"/>
                                            </c:when>
                                            <c:otherwise>
                                                <span class="am-icon-close is_something" data-attr="isOnsale"/>
                                            </c:otherwise>
                                        </c:choose>
                                    </td>
                                    <td>${product.isTop}</td>
                                    <td>${product.isNew}</td>
                                    <td>${product.isRecommend}</td>
                                    <td>${product.isHot}</td>
                                    <td class="am-hide-sm-only">${product.createdAt}</td>
                                    <td><input type="text" value="${product.stock}"/></td>
                                    <td><input type="text" class="sortOrder" value="${product.sortOrder}"/></td>
                                    <td>
                                        <div class="am-btn-toolbar">
                                            <div class="am-btn-group am-btn-group-xs">
                                                <a href="${pageContext.request.contextPath}/admin/product/edit?id=${product.id}"
                                                   class="am-btn am-btn-default am-btn-xs am-text-secondary"><span
                                                        class="am-icon-pencil-square-o"></span> 编辑</a>
                                                <a onclick="delete_product(${product.id})" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span
                                                        class="am-icon-trash-o"></span> 删除</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                        <div class="am-cf">
                            当前页${products.pageNum}/ 每页${products.pageSize}记录/ 共 ${products.total} 条记录
                            <div class="am-fr">
                                <ul class="am-pagination">

                                    <li <c:if test="${products.hasPreviousPage ==false}">class="am-disabled"</c:if>><a
                                            href="${pageContext.request.contextPath}/admin/product/index?pageSize=${products.prePage}">«</a>
                                    </li>
                                    <c:forEach begin="1" var="i" end="${products.pages}">
                                        <li <c:if test="${products.pageNum==i}">class="am-active"</c:if>>
                                            <%--<a href="${pageContext.request.contextPath}/admin/product/index?pageSize=${i}&name=${params.name}&is_top=${params.is_top}&init_time=${params.initTime}&end_time=${params.endTime}">${i}</a>--%>
                                            <a href="${pageContext.request.contextPath}/admin/product/index?pageSize=${i}${url}">${i}</a>
                                        </li>
                                    </c:forEach>

                                    <li <c:if test="${products.hasNextPage ==false}">class="am-disabled"</c:if>><a
                                            href="${pageContext.request.contextPath}/admin/product/index?pageSize=${products.nextPage}">»</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <hr>
                    </form>
                </div>

            </div>
        </div>

        <jsp:include page="../layouts/foot.jsp"></jsp:include>

    </div>
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="${pageContext.request.contextPath}/static/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="${pageContext.request.contextPath}/static/assets/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/static/assets/js/app.js"></script>
<script src="${pageContext.request.contextPath}/static/xSystem/js/xSystem.js"></script>
<script src="${pageContext.request.contextPath}/static/xSystem/vendor/layer/layer.js"></script>
<script src="${pageContext.request.contextPath}/static/xSystem/vendor/nprogress/nprogress.js"></script>
<script>

    function delete_product(id) {
        layer.confirm('您确定要删除吗？', {
                btn: ['确定','取消'],
                skin: 'layui-layer-molv',
                icon: 6,
            }, function(){
                window.location.href='${pageContext.request.contextPath}/admin/product/delete?id='+id+'';
            }, function(){
                layer.close();
        });
    }

    $(function () {
        /*layer.ready(function(){
            layer.open({
                type: 1,
                title: '欢迎页',
                maxmin: true,
                area: ['800px', '500px'],
                content: 'http://www.baidu.com',
                end: function(){
                    layer.tips('Hi', '#about', {tips: 1})
                }
            });
        });*/
        
        $('.sortOrder').change(function () {
            var id = $(this).parents('tr').find('.checked_id').data('id');
            var sort_order = $(this).val();
            var data = {
                'sort': sort_order,
                'id': id
            }

            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/admin/product/sortOrder',
                data: JSON.stringify(data),
                dataType: 'json',
                contentType: 'application/json',
                success: function (data) {
                    if(data.success){
                        layer.alert(data.message, {
                            skin: 'layui-layer-molv',
                            btn: ['确定'],
                            closeBtn: 1,
                            icon: 6,
                        });
                    }else if(data.error==false) {
                        layer.alert(data.message, {
                            skin: 'layui-layer-molv',
                            btn: ['确定'],
                            closeBtn: 1,
                            icon: 5,
                        });
                    }
                }
            });

        })

        $('.is_something').click(function () {
            var _this = $(this);
            var attr = $(this).data('attr');
            var id = $(this).parents('tr').find('.checked_id').data('id');
            var data = {
                'attr': attr,
                'id': id
            }
            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/admin/product/isSomething',
                data: JSON.stringify(data),
                dataType: 'json',
                contentType: 'application/json',
                success: function (data) {
                    console.log(data);
                    _this.toggleClass('am-icon-close am-icon-check');
                }
            })
        })

        $('#destroy_checked').click(function () {
                var length = $(".checked_id:checked").length;
                if (length == 0) {
                    layer.alert('必须选择一条', {
                        skin: 'demo-class' //样式类名
                        ,closeBtn: 1,
                        icon: 6
                    });
                    return false;
                }
                var ids= [];
                for (var i =0;i<length;i++){
                   ids.push($(".checked_id:checked").eq(i).data('id'));
                }
                var data={
                    'id':ids
                }

                layer.confirm('您确定要删除吗？', {
                    btn: ['确定','取消'],
                    skin: 'layui-layer-molv',
                    icon: 6,
                }, function(){
                    $.ajax({
                        type: 'POST',
                        url: '${pageContext.request.contextPath}/admin/product/destroyChecked',
                        data: JSON.stringify(data),
                        dataType: 'json',
                        contentType: 'application/json',
                        success: function (data) {
                            if(data.success){
                                layer.alert(data.message, {
                                    skin: 'layui-layer-molv',
                                    btn: ['确定'],
                                    closeBtn: 1,
                                    icon: 6,
                                    yes: function(index, layero) {
                                        console.log(index);
                                        window.location.href='${pageContext.request.contextPath}/admin/product/index';
                                    }
                                });
                            }
                        }
                    });
                }, function(){
                    layer.close();
                });
        })

    })



</script>

</body>
</html>
